import React from 'react';
import { Card, Modal, Button } from 'antd';
import DescriptionList from '../../components/DescriptionList';
import './index.less';

const { Description } = DescriptionList;

class vinDetailModal extends React.PureComponent {
  render() {
    const { changeVisible, detailModelData } = this.props;
    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="700px"
        visible={this.props.visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="small" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false} size="small" type="inner">
            <DescriptionList title="" col={2}>
              <Description term="VIN号" style={{ width: '50%' }}>
                {detailModelData.vin}
              </Description>
              <Description term="品牌" style={{ width: '50%' }}>
                {detailModelData.brandName}
              </Description>
              <Description term="车系" style={{ width: '50%' }}>
                {detailModelData.seriesName}
              </Description>
              <Description term="车型" style={{ width: '50%' }}>
                {detailModelData.styleName}
              </Description>
              <Description term="颜色" style={{ width: '50%' }}>
                {detailModelData.colorName}
              </Description>
              <Description term="车牌" style={{ width: '50%' }}>
                {detailModelData.licence}
              </Description>
              <Description term="经销商" style={{ width: '50%' }}>
                {detailModelData.dealerName}
              </Description>
              <Description term="发动机号" style={{ width: '50%' }}>
                {detailModelData.doptCode}
              </Description>
              <Description term="入库时间" style={{ width: '50%' }}>
                {detailModelData.dealerInDate}
              </Description>
              <Description term="销售时间" style={{ width: '50%' }}>
                {detailModelData.availableDate}
              </Description>
              <Description term="激活时间" style={{ width: '50%' }}>
                {detailModelData.enrollDate}
              </Description>
            </DescriptionList>
          </Card>
        </div>
      </Modal>
    );
  }
}

export default vinDetailModal;
